<template>
    <div v-if="userStore.routeCache && userStore.routeCache.length > 0 " class="route-tab">
        <div class="route-list">
            <div 
            v-for="(item, index) in userStore.routeCache" 
            :key="item" 
            class="route-item"
            :class=" isActiveRoute(item.path) ? 'active-route-item' : '' "
            @click="jumpPage(item)"
            >
                {{ item?.name }}
                <img 
                v-if="isActiveRoute(item.path)" 
                class="close" 
                src="@/assets/imgs/close.png"
                @click.stop="closePage(item.path)"
                >
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user.ts';
import { watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { deleteRoute } from '@/utils/route.ts';

// 路由缓存
const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const isActiveRoute = (path: string) => {
    return path === route.path;
}

isActiveRoute();
 
const jumpPage = (item: any) => {
    router.push({
        path: item.path
    });
}

const closePage = (path: string) => {
    const isDelete = deleteRoute(useUserStore, path);
    if( isDelete ){
        router.go(-1);  
    }
}
</script>
<style lang="less" scoped>
    .route-tab{
        width: 100%;
        height: 40px;
        .route-list{
            display: flex;
            width: 100%;
            height: 100%;
            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
            .route-item{
                position: relative;
                padding: 11px 16px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #999;
                cursor: default;
                &::after{
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    height: 20px;
                    width: 1px;
                    background: #e7e7e7;
                }
            }
            .active-route-item{
                padding: 11px 36px 11px 16px;
                color: #165DFF;
                .close{
                    position: absolute;
                    right: 16px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }
        }
    }
</style>